<template>
  <common-card title="今日销售额" :value="salesToday | moneyFormat" class="today-users">
    <template>
      <div class="compare-wrap">
        <div class="compare">
          <div>日同比</div>
          <div class="emphasis">{{salesGrowthLastDay}}%</div>
          <div :class="salesGrowthLastDay>0 ? 'increment' : 'decrement'"></div>
        </div>
        <div class="compare">
          <div>月同比</div>
          <div class="emphasis">{{salesGrowthLastMonth}}%</div>
          <div :class="salesGrowthLastMonth>0 ? 'increment' : 'decrement'"></div>
        </div>
      </div>
    </template>
    <!-- <template v-slot:total> -->
    <template #total>
      <span>昨日销售额</span>
      <span class="emphasis">{{salesLastDay}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodaySales',

  /* 
  "salesToday": 30346799,
  "salesLastDay":   36000000,
  "salesGrowthLastDay": -19.16,
  "salesGrowthLastMonth": 56.67,
  */
  computed: {
    ...mapState({
      salesToday: state => state.data.reportData.salesToday,
      salesLastDay: state => state.data.reportData.salesLastDay,
      salesGrowthLastDay: state => state.data.reportData.salesGrowthLastDay,
      salesGrowthLastMonth: state => state.data.reportData.salesGrowthLastMonth,
    })
  }
}
</script>

<style lang="scss" scoped>
  .today-users {
    .compare-wrap {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .compare {
        display: flex;
        font-size: 12px;
        margin: 5px;
      }
    }
  }
</style>
